const center = [104.1324, 36.92669]
var map = null
var menu = document.getElementById('menu')
var mapDom = document.getElementById('map')
fetch('../data/style.json').then(res => res.json()).then(res => {
    map = new mapboxgl.Map({
        accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
        container: 'map', // container ID
        style: res,
        center: center, // starting position [lng, lat]
        zoom: 3,
        doubleClickZoom: false,
        hash: false,
        localFontFamily: true,
        logoPosition: 'bottom-right',
        maxBounds: [
            [36.632400000000786, 8.047890842532581],
            [171.63240000000144, 57.960092259944304]
        ]
    });

    map.once('load', () => {
        const mousePos = document.querySelector('.mouse-position')

        map.on('mousemove', e => {
            console.log(e);
            const {lng, lat} = e.lngLat
            mousePos.innerHTML = [lng, lat].map(n => n.toFixed(4)).join(', ')
        });
        map.on('zoom', mapZoomEvt);
    })
})

function mapZoomEvt() {
    const mapZoom = document.querySelector('.map-zoom')
    mapZoom.innerHTML = map.getZoom().toFixed(2)
    if(map.getZoom() > 10) map.off('zoom', mapZoomEvt);
}

document.getElementById('menuToggle').onclick = () => {
    if(menu.classList.contains('close')) {
        menu.classList.remove('close')
        mapDom.classList.remove('close')
    }  else  {
        menu.classList.add('close')
        mapDom.classList.add('close')
    }
    setTimeout(() => {
        map.resize()
    }, 1000)
}